<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<nz-tabset [nzTabBarGutter]="16" [nzSize]="'small'">
  <nz-tab nzTitle="Aggregated Metrics">
    <flink-table-aggregated-metrics
      [isLoading]="isLoading"
      [aggregated]="aggregated"
    ></flink-table-aggregated-metrics>
  </nz-tab>
  <nz-tab nzTitle="Subtask Metrics">
    <nz-table
      nzSize="small"
      [nzLoading]="isLoading"
      [nzData]="listOfTask"
      [nzScroll]="{ x: '2170px', y: 'calc(100% - 36px)' }"
      [nzFrontPagination]="false"
      [nzShowPagination]="false"
      [nzVirtualItemSize]="virtualItemSize"
      [nzVirtualMinBufferPx]="300"
      [nzVirtualMaxBufferPx]="300"
      [nzVirtualForTrackBy]="trackBySubtask"
    >
      <thead>
        <tr>
          <th nzWidth="80px" nzLeft>ID</th>
          <th [nzSortFn]="sortReadBytesFn" nzWidth="140px">Bytes Received</th>
          <th [nzSortFn]="sortReadRecordsFn" nzWidth="150px">Records Received</th>
          <th [nzSortFn]="sortWriteBytesFn" nzWidth="120px">Bytes Sent</th>
          <th [nzSortFn]="sortWriteRecordsFn" nzWidth="120px">Records Sent</th>
          <th [nzSortFn]="sortAttemptFn" nzWidth="100px">Attempt</th>
          <th [nzSortFn]="sortHostFn" nzWidth="200px">Host</th>
          <th [nzSortFn]="sortStartTimeFn" nzWidth="150px">Start Time</th>
          <th [nzSortFn]="sortDurationFn" nzWidth="150px">Duration</th>
          <th [nzSortFn]="sortEndTimeFn" nzWidth="150px">End Time</th>
          <th nzWidth="320px">Accumulated Time (Backpressured/Idle/Busy)</th>
          <th nzWidth="320px">Status Durations</th>
          <th [nzSortFn]="sortStatusFn" nzWidth="120px" nzRight>Status</th>
          <th nzWidth="50px" nzRight>More</th>
        </tr>
      </thead>
      <tbody>
        <ng-template nz-virtual-scroll let-data>
          <ng-container *ngIf="narrowLogData(data) as subtask">
            <tr>
              <td nzLeft>
                {{ subtask['subtask'] }}
              </td>
              <td>
                <span *ngIf="subtask['metrics']['read-bytes-complete']; else loadingTemplate">
                  {{ subtask['metrics']['read-bytes'] | humanizeBytes }}
                </span>
              </td>
              <td>
                <span *ngIf="subtask['metrics']['read-records-complete']; else loadingTemplate">
                  {{ subtask['metrics']['read-records'] | number: '1.0-0' }}
                </span>
              </td>
              <td>
                <span *ngIf="subtask['metrics']['write-bytes-complete']; else loadingTemplate">
                  {{ subtask['metrics']['write-bytes'] | humanizeBytes }}
                </span>
              </td>
              <td>
                <span *ngIf="subtask['metrics']['write-records-complete']; else loadingTemplate">
                  {{ subtask['metrics']['write-records'] | number: '1.0-0' }}
                </span>
              </td>
              <td>{{ subtask.attempt + 1 }}</td>
              <td>{{ subtask.host }}</td>
              <td>{{ subtask['start_time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
              <td>{{ subtask.duration | humanizeDuration }}</td>
              <td>{{ subtask['end-time'] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
              <td>
                {{ subtask['metrics']['accumulated-backpressured-time'] | humanizeDuration }}
                /
                {{ subtask['metrics']['accumulated-idle-time'] | humanizeDuration }}
                /
                {{ subtask['metrics']['accumulated-busy-time'] | humanizeDuration }}
              </td>
              <td>
                <ng-container *ngIf="!subtask['status-duration']; else badges">-</ng-container>
                <ng-template #badges>
                  <flink-dynamic-host
                    *ngFor="let duration of convertStatusDuration(subtask['status-duration'])"
                    [data]="{ state: duration.key, duration: duration.value }"
                    [component]="durationBadgeComponent"
                  ></flink-dynamic-host>
                </ng-template>
              </td>
              <td nzRight>
                <flink-dynamic-host
                  [data]="{ state: subtask['status'] }"
                  [component]="stateBadgeComponent"
                ></flink-dynamic-host>
              </td>
              <td nzRight>
                <flink-dynamic-host
                  [data]="{ subtask }"
                  [component]="actionComponent"
                ></flink-dynamic-host>
              </td>
            </tr>
          </ng-container>
        </ng-template>
      </tbody>
    </nz-table>
  </nz-tab>
</nz-tabset>

<ng-template #loadingTemplate>
  <i nz-icon nzType="loading"></i>
</ng-template>
